<template>
    <div class="wrapper">
        <span class="back-btn" @click="router.back()">
            <el-icon>
                <Back />
            </el-icon>
        </span>
        <div class="header">
            <div class="a">
                <LabelTitle title="报价信息" />
                <el-form-item label-width="130px" v-for="item in formList" :key="item.label" :label="item.label">
                    <el-input :type="item.type" v-model="formData[item.value]" />
                </el-form-item>

            </div>
        </div>
        <div style="display:flex;border-top: 1px solid #eee;padding-top: 1rem;">
            <el-button type="primary" @click="handleClick">注册</el-button>
            <el-button @click="store">保存</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import LabelTitle from '../../../../components/LabelTitle/index.vue';
import { Back } from '@element-plus/icons-vue'
import { ref } from 'vue';
import { checkPropEmpty, responseCallback } from '../../../../utils';
import { sellerListingApi } from '../../../../api/user';
import { ElMessage } from 'element-plus';
const router = useRouter();

const formData = ref({
    "provideNum": 0,
    "heatValue": 0,
    "price": 0,
    "transportPrice": 0,
    "address": "",
    "extra": ""
})

const formList = [{
    label: "供应数量(万/吨)",
    value: "provideNum",
    type: "number"
}, {
    label: "热值(KCal/kg) ≥ ",
    value: "heatValue",
    type: "number"
}, {
    label: "原煤单价(元/吨)",
    value: "price",
    type: "number"
}, {
    label: "运费单价(元/吨)",
    value: "transportPrice",
    type: "number"
}, {
    label: "发货港口",
    value: "address",
    type: "text"
}, {
    label: "产地",
    value: "extra",
    type: "text"
},]

const handleClick = () => {
    const data = {
        ...formData.value
    };
    if (checkPropEmpty(data)) {

        responseCallback({
            promise: sellerListingApi(data),
            successMessage: "挂牌成功，可以到我的卖方挂牌信息查看",
            cb() {
                router.back();
                setTimeout(() => {
                    location.reload();
                }, 1000);
            }
        })

    } else {
        ElMessage({
            message: "请填写完整信息",
            type: "warning"
        })
    }
}

const storeKey = "sellerListing";
(function recover() {
    const item = localStorage.getItem(storeKey)
    if (item) {
        const obj = JSON.parse(item);
        formData.value = obj;

        ElMessage({
            message: "已经恢复上次保存的数据",
            type: "success"
        })
    }
})();
const store = () => {
    localStorage.setItem(storeKey, JSON.stringify({
        ...formData.value
    }))
    ElMessage({
        message: "保存成功",
        type: "success"
    })
}

</script>

<style lang="less" scoped>
.wrapper {
    position: relative;
    padding: 0 5vw;
}

.back-btn {
    position: absolute;
    left: 0;
    top: -10px;
    transform: translateY(-100%);
    width: 150px;
    font-size: 30px;
    cursor: pointer;
    color: var(--el-color-primary);
    transition: all .5s;

}

.a {
    .el-form-item {
        width: 30%;
        display: inline-flex;
        margin-right: 10px;

    }

    .el-select--large {
        width: 100%;
    }
}
</style>